<template>
  <div class="flex pageview">
    <div id="container" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
let gridGroup = null;
export default {
  name: 'governmentScreen',
  components: {},
  data() {
    return {};
  },
  created() {},
  destroyed() {},
  mounted() {
    this.getmap();
  },
  beforeDestroy() {},
  methods: {
    getmap() {
      var gridMap = new AMap.Map('container', {
        resizeEnable: true,
      });
      // 网格群组初始化
      // gridGroup = new AMap.OverlayGroup();
      // gridMap.add([gridGroup]);
      AMap.plugin('AMap.DistrictSearch', function () {
        var districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，country表示国家
          level: 'province',
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 1,
          extensions: 'all',
        });
        // 搜索所有省/直辖市信息
        districtSearch.search('湖北', function (status, result) {
          let citys = result.districtList[0].districtList;
          console.log(result);
          var citytSearch = new AMap.DistrictSearch({
            // 关键字对应的行政区级别，country表示国家
            level: 'city',
            //  显示下级行政区级数，1表示返回下一级行政区
            subdistrict: 1,
            extensions: 'all',
          });
          for (var i = 0; i < citys.length; i++) {
            if (citys[i].name == '武汉市' || citys[i].name == '孝感市') {
              var names = citys[i].name;
              citytSearch.search(citys[i].name, function (cityStatus, cityResult) {
                let path = cityResult.districtList[0].boundaries;
                path.forEach((item) => {
                  console.log(names)
                  if (names == '武汉市') {
                    const polygon = new AMap.Polygon({
                      bubble: true, // 点击事件是否冒泡到地图上
                      path: item,
                      fillColor: '#05e8b9',
                      fillOpacity: 0.3,
                      strokeStyle: 'dashed',
                      strokeWeight: 1,
                      strokeColor: '#e8000f', // 线条颜色
                      zIndex: 9,
                    });
                    gridMap.add(polygon);
                  } else {
                    const polygon = new AMap.Polygon({
                      bubble: true, // 点击事件是否冒泡到地图上
                      path: item,
                      fillColor: '#4de800',
                      fillOpacity: 0.3,
                      strokeStyle: 'dashed',
                      strokeWeight: 1,
                      strokeColor: '#e8000f', // 线条颜色
                      zIndex: 9,
                    });
                    gridMap.add(polygon);
                  }
                });
                // 添加网格多边形
                // const path = JSON.parse(lngLat).map((position) => {
                //   return new AMap.LngLat(position.split(',')[0], position.split(',')[1]);
                // });
                // const gridPolygon = new AMap.Polygon({
                //   bubble: true, // 点击事件是否冒泡到地图上
                //   path: path,
                //   fillColor: '#05e8b9',
                //   fillOpacity: 0.3,
                //   strokeStyle: 'dashed',
                //   strokeWeight: 1,
                //   strokeColor: '#fff', // 线条颜色
                //   zIndex: 9,
                //   // extData: grid
                // });

                // gridGroup.addOverlay(gridPolygon);
              });
            }
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.pageview {
  width: 100%;
  height: 100%;
  background: #0e1b29;
  display: flex;
  flex-direction: column;
  .topBox {
    width: 100%;
    height: 0.93rem;
    background: url(/img/dashboard/topwrap.png) no-repeat;
    background-size: cover;
    position: relative;
    .reback {
      display: block;
      width: 1.95rem;
      height: 0.44rem;
      position: absolute;
      top: 0.12rem;
      left: 0.07rem;
      background: url(/img/dashboard/reback.png) no-repeat;
      background-size: cover;
      &:hover,
      &:active {
        background-image: url(/img/dashboard/reback-active.png);
      }
    }
    .time {
      position: absolute;
      top: 0.13rem;
      right: 0.17rem;
      line-height: 0.28rem;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      img {
        margin-right: 0.13rem;
      }
    }
  }
  .bottomBox {
    background: #0e1b29 url(/img/dashboard/bg.jpg) no-repeat center bottom;
    background-size: cover;
    .leftbox {
      padding-left: 15px;
      &::before {
        left: 0;
        background: linear-gradient(90deg, #02081b 0%, #061230 88%, rgba(3, 15, 46, 0) 100%);
      }
      // & > div + div {
      //   margin-top: 10px;
      // }
    }
    .rightbox {
      padding-right: 15px;
      &::before {
        right: 0;
        background: linear-gradient(-90deg, #02081b 0%, #061230 88%, rgba(3, 15, 46, 0) 100%);
      }
    }
    .leftbox,
    .rightbox {
      width: 5.57rem;
      position: relative;
      &::before {
        position: absolute;
        top: 0;
        content: '';
        display: block;
        width: 6.16rem;
        height: 100%;
      }
      & > div {
        position: relative;
        z-index: 1;
      }
    }
    .centerbox {
      display: flex;
      flex-direction: column;
      .top {
        width: 100%;
        height: 0.92rem;
        background: url(/img/dashboard/topbg.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
